import { Suspense, useState, lazy, useEffect } from 'react'
import { useRoutes, HashRouter as Hash, BrowserRouter as History, Navigate, useLocation } from 'react-router-dom';


import Loading from './components/Loading';
import Guide from './views/Guide/Guide';
import Demo from './views/Demo/Demo';
import Login from './views/Logins/Login';
import Reg from './views/Logins/Reg';
import FindPass from './views/Logins/FindPass';
import Main from './views/Main/Main';
import { MainRouters } from './views/Main/router'
import Search from './views/Searchs/Search';
import City from './views/Citys/City';
import ChangePass from './views/Logins/ChangePass';
import Submit from './views/Submit/Submit';
import Detail from './views/Detail/Detail';
// 路由懒加载
const NotFound = lazy(() => import('./views/ErrorPages/NotFound'))
const BadServe = lazy(() => import('./views/ErrorPages/BadServe'))


function App() {
  return (
    <div className="App" style={{ width: '100%', height: '100%' }}>
      <Suspense fallback={<Loading />} >
        <Hash>
          <LayoutRouter></LayoutRouter>
        </Hash>
      </Suspense>
    </div>
  )
}


// 全局的路由
const LayoutRouter = () => {
  // 判断从哪里来
  const { pathname } = useLocation()

  useEffect(() => {
    localStorage.setItem('fromPath', localStorage.getItem('toPath') as any)
    localStorage.setItem('toPath', pathname)
  }, [pathname])


  return useRoutes([
    {
      path: '/',
      element: <Navigate to='/guide' />
    },
    {
      path: '/guide', element: <Guide />
    },
    {
      path: "/demo", element: <Demo />
    },
    {
      path: "/main", element: <Main />, children: MainRouters
    },
    {
      path: "/search", element: <Search />
    },
    {
      path: "/city", element: <City />
    },
    {
      path: "/login", element: <Login />
    },
    {
      path: "/reg", element: <Reg />
    },
    {
      path: "/findpass", element: <FindPass />
    },
    {
      path: "/changepass", element: <ChangePass />
    },
    {
      path: "/submit", element: <Submit />
    },
    {
      path: "/detail/:id", element: <Detail />
    },
    {
      path: "/503", element: <BadServe />
    },
    {
      path: "/404", element: <NotFound />
    },
    {
      path: "*",
      element: <Navigate to='/404' />
    }
  ])
}

export default App
